<template>
  <div>
    <div class="board-container">
      <div v-for="item in ajaxResult" :key="item.boardId" class="board-content">
        <router-link
          :name="'/Board/' + item.boardId"
          :to="'/Board/' + item.boardId"
        >
          <Card style="width: 90%; height: 90%; margin: 0 auto">
            <div style="text-align: center">
              <h3>{{ item.boardName }}</h3>
              <Divider />
              <h3>{{ item.boardContent }}</h3>
            </div>
          </Card>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data () {
    return {
      ajaxResult: ''
    }
  },
  mounted () {
    var _this = this // 临时变量
    this.$axios({
      method: 'get',
      url: '/selectBoard'
    }).then(function (response) {
      console.log(response.data.result)
      _this.ajaxResult = response.data.result
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.board-container {
  margin-left: 10%;
  margin-top: 3%;
  width: 80%;
  height: auto;
  /* border: 0.1em solid red; */
}
.board-content {
  float: left;
  width: 33%;
  height: 15em;
  /* border: 0.1em solid red; */
}
</style>
